<template>
  <view class="coinbank">
    <view class="coinbankHeader">
      <view class="text">{{ title() }}</view>
      <image src="../../static/coinbankHeader.png" @click="skip"></image>
    </view>
    <view class="coinbankCenter">
      <CoinbankIndex v-if="tabBarItemIndex == 0"></CoinbankIndex>
      <Launchpad v-if="tabBarItemIndex == 1"></Launchpad>
      <Mining v-if="tabBarItemIndex == 2"></Mining>
      <History v-if="tabBarItemIndex == 3"></History>
    </view>
    <view class="coinbankBottom">
      <div class="tabBarItem" @click="tabBarClick(0)">
        <image src="../../static/coinbankTabBar/home1.png" v-if="tabBarItemIndex == 0"></image>
        <image src="../../static/coinbankTabBar/home0.png" v-else></image>
        <view class="text" :class="{ activeText: tabBarItemIndex == 0 }">
          {{ $t('mining.text') }}
        </view>
      </div>

      <div class="tabBarItem" @click="tabBarClick(1)">
        <image src="../../static/coinbankTabBar/Launchpad1.png" v-if="tabBarItemIndex == 1"></image>
        <image src="../../static/coinbankTabBar/Launchpad0.png" v-else></image>
        <view class="text" :class="{ activeText: tabBarItemIndex == 1 }"> Launchpad </view>
      </div>

      <div class="tabBarItem" @click="tabBarClick(2)">
        <image src="../../static/coinbankTabBar/mining1.png" v-if="tabBarItemIndex == 2"></image>
        <image src="../../static/coinbankTabBar/mining0.png" v-else></image>
        <view class="text" :class="{ activeText: tabBarItemIndex == 2 }">
          {{ $t('mining.text1') }}
        </view>
      </div>

      <div class="tabBarItem" @click="tabBarClick(3)">
        <image src="../../static/coinbankTabBar/Launchpad1.png" v-if="tabBarItemIndex == 3"></image>
        <image src="../../static/coinbankTabBar/history0.png" v-else></image>
        <view class="text" :class="{ activeText: tabBarItemIndex == 3 }">
          {{ $t('mining.text2') }}
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import CoinbankIndex from './coinbankIndex/coinbankIndex.vue';
import Launchpad from './launchpad/launchpad.vue';
import History from './history/history.vue';
import Mining from './mining/mining.vue';
export default {
  components: {
    CoinbankIndex,
    Launchpad,
    Mining,
    History
  },
  data() {
    return {
      tabBarItemIndex: localStorage.getItem('tabBarItemIndex') || 0
    };
  },
  methods: {
    tabBarClick(i) {
      this.tabBarItemIndex = i;
      localStorage.setItem('tabBarItemIndex', i);
    },
    skip() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    title() {
      if (this.tabBarItemIndex == 0) {
        return 'Turing Launchpad';
      } else if (this.tabBarItemIndex == 1) {
        return 'Turing Launchpad';
      } else if (this.tabBarItemIndex == 2) {
        return '新币挖矿';
      } else if (this.tabBarItemIndex == 3) {
        return 'Launchpool订单';
      }
    }
  }
};
</script>

<style lang="less" scoped>
.coinbank {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1f282f;
  .coinbankHeader {
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .text {
      font-weight: bold;
      color: #fff;
      font-size: 32rpx;
    }
    image {
      width: 34rpx;
      height: 34rpx;
    }
  }

  .coinbankCenter {
    flex: 1;
    overflow: scroll;
  }

  .coinbankBottom {
    border-top: 2rpx solid #354856;
    height: 100rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tabBarItem {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 40rpx;
        height: 40rpx;
      }
      .text {
        margin-top: 4rpx;
        font-size: 20rpx;
        color: #737987;
      }

      .activeText {
        color: #2f7cf7;
      }
    }
  }
}
</style>
